<script setup lang="ts">
import { ref, defineProps, computed } from 'vue'
import customSelectMenu from '@/pages/subject/subjectDetail/component/custom-select-menu.vue'

const collegeList = ref<Array<any>>([
  { name: '重庆医科大学', logo: '', tag: '普通本科' },
  { name: '重庆医科大学', logo: '', tag: '普通本科' },
  { name: '重庆医科大学', logo: '', tag: '普通本科' },
])

const selectIndex1 = ref<number>(0)
const selectMenu1 = ref<Array<string>>(['全部分类', '精选优品', '价格较低', '只买贵的', '其他方式'])
const select = (e) => {}
</script>

<template>
  <view class="wh100p applyColleges" style="padding: 0; box-sizing: border-box">
    <view class="w100p flex gap18 column-center" style="padding: 0 30rpx; box-sizing: border-box">
      <view
        class="graceSelectMenuItem flex-center column-center"
        style="width: 25%; height: 60rpx; background-color: #f2f2f2; border-radius: 30rpx"
      >
        <custom-select-menu ref="selectMenu2" :items="selectMenu1" :select-index="selectIndex1" @select="select" />
      </view>
      <view
        class="graceSelectMenuItem flex-center column-center"
        style="width: 25%; height: 60rpx; background-color: #f2f2f2; border-radius: 30rpx"
      >
        <custom-select-menu ref="selectMenu2" :items="selectMenu1" :select-index="selectIndex1" @select="select" />
      </view>
      <view style="margin-left: auto; margin-right: 20rpx; font-size: 30rpx">共210所</view>
    </view>
    <view v-for="(item, index) in [...collegeList, ...collegeList]" :key="index" class="college-listItem flex column-center gap16">
      <view class="flex-column h100p" style="width: 120rpx; height: 100%">
        <img style="width: 120rpx; height: 120rpx; border-radius: 50%; background-color: #1e88e5" />
      </view>
      <view class="h100p flex-column flex gap8">
        <view class="title">
          {{ item.name }}
        </view>
        <view class="tag">
          {{ item.tag }}
        </view>
        <view class="tag">
          {{ item.tag }}
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped>
.college-listItem {
  height: 200rpx;
  width: 100%;
  border-bottom: #9e9e9e 1rpx solid;
  padding: 20rpx 40rpx;
  box-sizing: border-box;
}

.college-listItem .title {
  font-size: 38rpx;
}

.college-listItem .tag {
  font-size: 30rpx;
  color: #ababab;
}
</style>
